<template>
    <div class="page-product-detail" v-show="data.title">
        <Header title="产品详情" to=""></Header>
        <div style="height: 56px;"></div>
        <mu-container>
            <mu-card style="width: 100%; max-width: 540px; margin: 8px auto; position: relative; z-index: 100;">
                <mu-card-header :title="data.title"></mu-card-header>
                <mu-divider></mu-divider>
                <mu-card-text class="buy-info">
                    <div v-html="data.invest_income"></div>
                    <mu-list-item-sub-title class="btns">
                        <span>{{data.sylx}}</span>
                        <span>{{data.zqlx}}</span>
                        <span>{{data.xmlx}}</span>
                        <span>{{data.pay_way}}</span>
                    </mu-list-item-sub-title>
                </mu-card-text>
            </mu-card>
            <mu-card style="width: 100%; max-width: 540px; margin: 8px auto; position: relative; z-index: 100;">
                <mu-card-title title="基本资料"></mu-card-title>
                <mu-divider></mu-divider>
                <mu-card-text class="product-info">
                       <div class="clear">
                            <div>产品名称</div>
                            <div>{{data.title}}</div>
                        </div>
                        <div class="clear">
                            <div>评级等级</div>
                            <div>{{data.rate_level}}</div>
                        </div>
                        <div class="clear">
                            <div>评级说明</div>
                            <div>{{data.rate_desc}}</div>
                        </div>
                        <div class="clear">
                            <div>产品状态</div>
                            <div>{{data.is_sale}}</div>
                        </div>
                        <div class="clear">
                            <div>大小配比</div>
                            <div>全大额</div>
                        </div>
                        <div class="clear">
                            <div>收益类型</div>
                            <div>{{data.income_type}}</div>
                        </div>
                        <div class="clear">
                            <div>发行机构</div>
                            <div>{{data.issuer}}</div>
                        </div>
                        <div class="clear">
                            <div>付息方式</div>
                            <div>{{data.pay_way}}</div>
                        </div>
                        <div class="clear">
                            <div>投资区域</div>
                            <div>{{data.invest_area}}</div>
                        </div>
                        <div class="clear">
                            <div>投资领域</div>
                            <div>{{data.invest_field}}</div>
                        </div>
                        <div class="clear">
                            <div>规模</div>
                            <div>{{data.invest_total}}</div>
                        </div>
                        <div class="clear">
                            <div>产品期限</div>
                            <div>{{data.tzqx}}</div>
                        </div>
                        <div class="clear">
                            <div>认购起点</div>
                            <div>{{data.qtje_title}}</div>
                        </div>
                        <div class="clear">
                            <div>本期起售日</div>
                            <div>{{data.sale_start_time}}</div>
                        </div>
                        <div class="clear">
                            <div>资质抵押</div>
                            <div>{{data.asset_pledge}}</div>
                        </div>
                </mu-card-text>
            </mu-card>
            <mu-card style="width: 100%; max-width: 540px; margin: 8px auto; position: relative; z-index: 100;">
                <mu-card-title title="亮点"></mu-card-title>
                <mu-divider></mu-divider>
                <mu-card-text class="product-msg">
                    <div v-html="data.highlight"></div>
                </mu-card-text>
            </mu-card>
            <mu-card style="width: 100%; max-width: 540px; margin: 8px auto; position: relative; z-index: 100;">
                <mu-card-title title="募集账号"></mu-card-title>
                <mu-divider></mu-divider>
                <mu-card-text class="product-account">
                    <div v-html="data.bank_account"></div>
                </mu-card-text>
            </mu-card>
            <mu-card style="width: 100%; max-width: 540px; margin: 8px auto; position: relative; z-index: 100;">
                <mu-card-title title="融资主体"></mu-card-title>
                <mu-divider></mu-divider>
                <mu-card-text class="product_body">
                    <div v-html="data.finance_body"></div>
                </mu-card-text>
            </mu-card>
            <mu-card style="width: 100%; max-width: 540px; margin: 8px auto; position: relative; z-index: 100;">
                <mu-card-title title="资金用途"></mu-card-title>
                <mu-divider></mu-divider>
                <mu-card-text class="product-where">
                    <div v-html="data.finance_where"></div>
                </mu-card-text>
            </mu-card>
            <mu-card style="width: 100%; max-width: 540px; margin: 8px auto; position: relative; z-index: 100;">
                <mu-card-title title="还款来源"></mu-card-title>
                <mu-divider></mu-divider>
                <mu-card-text class="product-payback">
                    <div v-html="data.finance_payback"></div>
                </mu-card-text>
            </mu-card>
            <mu-card style="width: 100%; max-width: 540px; margin: 8px auto; position: relative; z-index: 100;">
                <mu-card-title title="风控措施"></mu-card-title>
                <mu-divider></mu-divider>
                <mu-card-text class="product-safe">
                    <div v-html="data.finance_safe"></div>
                </mu-card-text>
            </mu-card>
            <mu-card style="width: 100%; max-width: 540px; margin: 8px auto; position: relative; z-index: 100;">
                <mu-card-title title="交易流程"></mu-card-title>
                <mu-divider></mu-divider>
                <mu-card-text class="product-trade">
                    <div>
                        <div>
                            <span>预约</span>
                            <span class="circle">实名预约产品</span>
                        </div>
                        <div>
                            <span></span>
                            <span>额度确认，合同寄送给你</span>
                        </div>
                        <div>
                            <span>打款</span>
                            <span class="circle">进行打款，签署合同，生成订单</span>
                        </div>
                        <div>
                            <span></span>
                            <span class="red">个人提供资料：身份证、银行卡、打款凭条</span>
                        </div>
                        <div>
                            <span></span>
                            <span class="red">机构提供资料：法人身份证、营业执照、开户许可证、打款凭条</span>
                        </div>
                        <div>
                            <span>成立</span>
                            <span class="circle">产品成立</span>
                        </div>
                        <div>
                            <span>存续</span>
                            <span class="circle">确认书发放</span>
                        </div>
                    <div class="line"></div>
                    </div>
                </mu-card-text>
            <div class="trade-btn">
                <mu-flex justify-content="center" align-items="center">
                    <mu-button full-width color="primary" @click="order">直接预约</mu-button>
                </mu-flex>
            </div>
            </mu-card>
        </mu-container>
        <div class="footer-space"></div>
    </div>
</template>

<script>
// 引入Header组件
import Header from '@c/Header';
// 组件
export default {
    // 注册组件
    components: { Header },
    // 数据
    data() {
        return {
            data: {}
        }
    },
    // 方法
    methods: {
        // 点击立即预约按钮
        order() {
            // 发送请求
            this.$http({
                url: '/api/product/bookProduct',
                method: 'POST',
                data: {
                    pid: this.$route.params.id
                }
            })
            // 监听数据返回
            .then(({ data: { code, msg } }) => {
                // console.log(code, msg);
                // 如果成功
                if (code === 0) {
                    // 改变为取消预约状态
                    this.data.hasBooked = true;
                    // 显示弹框
                    this.confirm();
                // 失败
                } else {
                    // 弹框显示
                    this.$alert(msg, { okLabel: '确定' })
                        .then(() => {
                            console.log('用户点击了确定按钮');
                        });
                }
            })
        },
        // 弹框点击的方法
         confirm () {
            // 弹框显示
            this.$confirm('预约成功，请保持电话畅通，我们会尽快安排投资经理联系您。', '提示', {
                type: 'info'
            })
            // 监听点击的按钮
            .then(({ result }) => {
                // 点击了确定按钮
                if (result) {
                    // 提示信息
                    this.$toast.success('恭喜您，预约成功！');
                } else {
                    console.log('用户点击了取消按钮')
                }
            });
        }

    },
    // 组件创建完成
    created() {
        // 请求数据
        this.$http({
            url: '/api/product/' + this.$route.params.id,
            method: 'GET'
        })
        // 监听数据返回
        .then(({ data: { code, data, msg } }) => {
            // console.log(code, data, msg);
            // 如果成功
            if (code === 0) {
                // 存储数据
                this.data = data;
            // 失败
            } else {
                // 提示信息
                this.$toast.error(msg);
                // 跳转到上一个页面
                this.$router.go(-1);
            }
        })
    }
}
</script>

<style lang="scss">
.page-product-detail {
    .comp-header {
        position: fixed;
        width: 100%;
        z-index: 1000;
    }
    .container {
        padding-left: 0;
        padding-right: 0;
        .mu-card {
            background-color: #fff;
            .mu-card-header {
                padding: 10px;
                .mu-card-header-title {
                    padding-right: 0;
                    .mu-card-title {
                        font-size: 16px;
                        line-height: 28px;
                        font-weight: bold;
                    }
                }

            }
            .mu-card-title-container {
                padding: 0 16px;
                .mu-card-title {
                    font-size: 15px;
                    color: rgba(0,0,0,.87);
                    &:before {
                        content: "";
                        display: inline-block;
                        width: 6px;
                        height: 6px;
                        border-radius: 50%;
                        background: red;
                        vertical-align: middle;
                        position: relative;
                        top: -2px;
                        left: -4px;
                        box-sizing: border-box;
                    }
                }

            }
            .mu-card-text.buy-info {
                padding: 0;
                p {
                    text-align: center;
                    margin: 0 auto;
                    width: 52%;
                    display: flex;
                    justify-content: space-between;
                    
                }
                .mu-item-sub-title.btns {
                    padding: 10px;
                    span {
                        font-size: 12px;
                        padding: 2px 4px;
                        border-radius: 3px;
                        border: 1px solid #F4E2C6;
                        &:nth-child(1) {
                            color: #EBAA6E;
                            background: #F8F2E7;
                        }
                        &:nth-child(2) {
                            color: #F56C6C;
                            background: #FAECEC;
                            border-color: #F8D1D1;
                        }
                        &:nth-child(3) {
                            color: #67C23A;
                            background: #ECF5E7;
                            border-color: #D1EAC4;
                        }
                        &:nth-child(4) {
                            color: #F56C6C;
                            background: #FAECEC;
                            border-color: #F8D1D1;
                        }
                    }
                }
            }
            .mu-card-text.product-info {
                color: #999999;
                div {
                    div {
                        width: 50%;
                        float: left;
                        &:last-child {
                            text-align: right;
                        }
                    }
                }
            }
        }
    }
    .clear::after {
        /*明确元素类型*/
        display: block;
        /*设置高度*/
        height: 0;
        /*设置伪元素中的内容*/
        content: "";
        /*设置元素不可见*/
        visibility: hidden;
        /*清除浮动*/
        clear: both;
        /*兼容IE低版本*/
        Zoom: 1;
    }
    .footer-space {
		height: 60px;
		width: 100%;
	}
    .mu-card-text.product-trade {
        position: relative;
        div div {
            display: flex;
            justify-content: flex-start;
            span {
                display: inline-block;
                &:first-child {
                    width: 42px;
                    height: 100%;
                }
                &:last-child {
                    flex: 1;
                    &.red {
                        color: red;
                    }
                    &:before {
                        content: "";
                        display: inline-block;
                        width: 6px;
                        height: 6px;
                        border-radius: 50%;
                        background: transparent;
                        vertical-align: middle;
                        position: relative;
                        top: -2px;
                        left: -4px;
                        box-sizing: border-box;
                    }
                    &.circle {
                        &:before {
                           background: red;
                        }
                    }
                }

            }
        }
        .line {
            position: absolute;
            width: 1px;
            height: 85%;
            background: red;
            left: 57px;
            top: 15px;
        }
    }
    .trade-btn {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px 25px;
        .mu-button {
            font-size: 15px;
            height: 44px;
            .mu-button-wrapper {
                height: 44px;
                .mu-ripple-wrapper {
                    height: 44px;
                }
            }
        }
    }
}
</style>